<template>
  <div class="app-container">
    <div style="display: flex;">
      <div class="filter-container" style="width:400px;min-height:100vh;padding:20px;">

        <el-date-picker
          v-model="listQuery.checktime"
          type="daterange"
          range-separator="至"
          class="filter-item"
          style="width:300px;"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
<!--        <el-cascader :options="select_city.city" class="filter-item w-200" clearable filterable-->
<!--                     style="margin-left:0;display: block"-->
<!--                     placeholder="地区选择" :props="{ expandTrigger: 'hover', checkStrictly: true }"-->
<!--                     v-model="listQuery.city"-->
<!--        ></el-cascader>-->

        <el-input
          v-model="listQuery.sid"
          size="small"
          placeholder="请输入编码"
          clearable
          style="margin-left:0;display: block;width:100%"
          class="filter-item w-200"
        />
<!--        <el-input-->
<!--          v-model="listQuery.title"-->
<!--          size="small"-->
<!--          placeholder="请输入标题"-->
<!--          clearable-->
<!--          style="margin-left:0;display: block;width:100%"-->
<!--          class="filter-item w-200"-->
<!--        />-->

<!--        <el-input-->
<!--          v-model="listQuery.name"-->
<!--          size="small"-->
<!--          placeholder="单位名称"-->
<!--          clearable-->
<!--          style="margin-left:0;display: block;width:100%"-->
<!--          class="filter-item w-200"-->
<!--        />-->
<!--        <el-input-->
<!--          v-model="listQuery.phone"-->
<!--          size="small"-->
<!--          placeholder="手机号码"-->
<!--          clearable-->
<!--          style="margin-left:0;display: block;width:100%"-->
<!--          class="filter-item w-200"-->
<!--        />-->
<!--        <el-input-->
<!--          v-model="listQuery.area"-->
<!--          size="small"-->
<!--          placeholder="全域搜索"-->
<!--          style="margin-left:0;display: block;width:100%"-->
<!--          clearable-->
<!--          class="filter-item w-200"-->
<!--        />-->

        <el-button-group class="filter-item" style="margin-left:0">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="search"
          >
            搜索
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="refresh"
          >
            重置
          </el-button>

        </el-button-group>

      </div>
      <div class="app-container" style="height:calc(100% - 180px);width:100%;margin:0;">
        <el-table
          v-loading="listLoading"
          :data="shensuData"
          element-loading-text="Loading"
          border
          fit
          height="100%"
          class="table-container"
          highlight-current-row
        >

          <el-table-column
            width="80"
            label="申诉编号"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column
            width="80"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <span style="color:red" v-if="scope.row.status==2">已拒绝</span>
              <span style="color:green" v-else-if="scope.row.status==1">已通过</span>
            </template>
          </el-table-column>
          <el-table-column
            width="160"
            label="地区"
            align="center"
          >
            <template slot-scope="scope">
              <span style="color:orange" v-if="scope.row.city==0">外链</span>
              <span v-else>{{scope.row.city}}</span>
            </template>
          </el-table-column>

          <el-table-column
            width="160"
            label="时间"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.dateline }}
            </template>
          </el-table-column>
          <el-table-column
            width="360"
            label="标题"
            align="center"
          >
            <template slot-scope="scope" >
              <span style="color:#369">{{ scope.row.title?scope.row.title:'-' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="160"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-popconfirm
                @confirm="back(scope.row.id)"
                icon="el-icon-info"
                icon-color="orange"
                :title="`确认回退【${scope.row.id}】至未处理状态？`"
              >
              <el-button
                size="small"
                type="warning"
                icon="el-icon-refresh"
                slot="reference"
              >
                回退
              </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="fetchData"
        />
      </div>
    </div>
  </div>

</template>
<style lang="less" scoped>
/deep/ .el-input__inner {
  height: 40px
}
</style>
<script>
import Pagination from '@/components/Pagination'
import { getCityAll, getShensuList,shensuBack } from '@/api/wz'

let id = 0
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      list: [],
      drawer: true,
      checkLeaderData: [],
      checkLeader: [],
      listLoading: true,
      listQuery: {
        checktime: [new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('fr-CA'), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0, 23, 59, 59).toLocaleDateString('fr-CA')],
        city: '',
        title: '',
        name: '',
        phone: '',
        area: '',
        page: 1,
        limit: 20,
        sid:''
      },
      dialogVisible: false,
      dialogType: 'create',
      loading: false,
      select_city: [],
      shensuData: []
    }
  },
  created() {
    this.getCity({ sz: 1 })
    this.fetchData()
  },
  methods: {
    back(sid){
      shensuBack({sid:sid}).then(response => {
        this.fetchData()
      })
    },
    search() {
      this.fetchData()
    },
    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20
      }
      // localStorage.setItem('wzbaseData', '')
      this.fetchData()
      this.getCity()
    },
    getCity() {
      let select_city = localStorage.getItem('select_city')
      if (!select_city) {
        getCityAll().then(response => {
          this.select_city = response.data
          localStorage.setItem('select_city', JSON.stringify(response.data))
        })
      } else {
        this.select_city = JSON.parse(select_city)
      }
    },
    sortChange(column) {
      // this.$set(this.listQuery,'orderType',column.order)
      // this.$set(this.listQuery,'orderFiled',column.prop)
      // // console.log(column.order)
      // this.fetchData(column)
    },
    fetchData(column) {
      this.listLoading = true
      getShensuList(this.listQuery).then(response => {
        this.shensuData = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    submit() {

    }
  }
}
</script>
